<template>
<div>
  <list :list='list'></list>
<!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            class="page_list"
            :total="allpages">
          </el-pagination>
</div>
  
</template>

<script>
import list from '@/components/List.vue'
export default {
  data(){
    return {
      list:[],
      all_list:[],
      // 分页
      currentPage4:1,     //当前页数
      allpages:3,         //全部留言数
      pagesize:10,        //当前也显示条数
    }
  },
  components:{
    list
  },
    methods:{
        // eslint-disable-next-line no-unused-vars
        getData(keyWord){
          // 请求数据post
          this.$http.get('http://blog.com/api/api/artical?cate='+keyWord).then(response => {
                  this.allpages = response.data.data.length
                  this.all_list = response.data.data;
                  this.list = this.all_list.slice(0,this.pagesize)
                })
        },
        // 分页
    handleSizeChange(val){
      this.pagesize = val
      this.list = this.all_list.slice(0,val)
    },
    handleCurrentChange(val){
      // console.log(this.currentPage4)
      this.currentPage4 = val //this.currentPage当前页，val要跳转的页面，this.pagesize每页显示的条数
      let start = 0
      let end 
      if(val > this.currentPage){
        start = this.currentPage * this.pagesize;
        end = start + this.pagesize
      }else{
        end = (this.currentPage - 1)*this.pagesize
        start = end - this.pagesize;
      }
      this.currentPage = val;
      // this.pageRow
      this.list = this.all_list.slice(start,end)
    },
    },
    created(){
      if(this.$route.query.type === undefined){
        // console.log('java');
          this.$http.get('http://blog.com/api/api/artical?cate=java开发').then(response => {
            this.allpages = response.data.data.length
            this.all_list = response.data.data;
            this.list = this.all_list.slice(0,this.pagesize)
          })
        }else{
          // console.log('请求文章' + this.$route.query.type)
          this.getData(this.$route.query.type);
        }
    },
    watch:{
        // eslint-disable-next-line no-unused-vars
        '$route'(to,from){
          if(this.$route.query.type === undefined){
          this.$http.get('http://blog.com/api/api/artical?cate=java开发').then(response => {
            this.allpages = response.data.data.length
            this.all_list = response.data.data;
            this.list = this.all_list.slice(0,this.pagesize)
          })
          // this.getData()
          }else{
            // console.log(this.$route.query.type);
            this.getData(this.$route.query.type);
          }
            
        }
    }
}
</script>

<style scoped>

.page_list{
  margin-top: 40px;
  margin-bottom: 60px;
}
</style>